<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这是一段<span style="color: red;">红色文字</span>的例子。</p>

    <button onclick="changeText()">点击我</button>
    <p>当前状态：<span id="status">未激活</span></p>

    <script>
    function changeText() {
        document.getElementById("status").textContent = "已激活！";
    }
    </script>

    <div style="background: lightblue; padding: 10px;">
    这是一个 div 块，会换行。
    </div>
    <span style="background: lightgreen; padding: 5px;">
    这是一个 span，不会换行。
    </span>
    <span>另一个 span。</span>
</body>
</html>